<script setup lang="ts">
import { createExecute, getContainerList, getInstanceList, removeContainer, startContainer, startExecute, stopContainer } from '@/api/docker';
import type { Container, Instance, Term } from '@/api/docker/type';
import type { TabsPaneContext } from 'element-plus';
import { onMounted, ref } from 'vue';
import ExecuteDrawer from '../components/ExecuteDrawer.vue';

const instanceList = ref([] as Instance[])
const containerList = ref([] as Container[])
const activeIndex = ref(0)
const term = ref({} as Term)
const executeId = ref('')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    containerList.value = [];
    if (tab.index != undefined) {
        const index = Number.parseInt(tab.index);
        refresh(index);
    }
}

onMounted(() => {
    init();
})

const init = async () => {
    const res = await getInstanceList();
    instanceList.value = res.data as Instance[];
    refresh(activeIndex.value);
}

const refresh = (index: number) => {
    if (instanceList.value.length != 0) {
        const instanceId = instanceList.value[index].id;
        getContainerList(instanceId).then((res) => {
            containerList.value = res.data as Container[];
        })
    }
}

const openStart = (container: Container) => {
    const instanceId = instanceList.value[activeIndex.value].id;
    startContainer(instanceId, container.id).then((res) => {
        refresh(activeIndex.value);
    })
}

const openStop = (container: Container) => {
    const instanceId = instanceList.value[activeIndex.value].id;
    stopContainer(instanceId, container.id).then((res) => {
        container.state = 'exited';
    })
}

const openRemove = (container: Container) => {
    const instanceId = instanceList.value[activeIndex.value].id;
    removeContainer(instanceId, container.id).then((res) => {
        refresh(activeIndex.value);
    });
}

const openExecute = (container: Container) => {
    const instanceId = instanceList.value[activeIndex.value].id;
    createExecute(instanceId, container.id).then((res) => {
        executeId.value = res.data as string;
        startExecute(instanceId, executeId.value).then((res) => {
            term.value.enable = true;
            term.value.executeId = executeId.value;
            term.value.instanceId = instanceId;
            term.value.input = '';
        })
    });
}

</script>

<template>
    <div class="content">
        <el-tabs v-model="activeIndex" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane v-for="(item, index) in instanceList" :label="item.name" :name="index"></el-tab-pane>
        </el-tabs>
        <el-table class="table" :data="containerList" style="width: 100%" stripe border>
            <el-table-column prop="id" label="容器ID" />
            <el-table-column prop="name" label="容器名" />
            <el-table-column prop="image" label="镜像名" />
            <el-table-column prop="state" label="状态" >
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-tag v-if="scope.row.state === 'running'" type="success">运行</el-tag>
                        <el-tag v-else-if="scope.row.state === 'exited'" type="info">停止</el-tag>
                        <el-tag v-else-if="scope.row.state === 'created'" type="primary">创建</el-tag>
                        <el-tag v-else-if="scope.row.status === -1" type="warning">异常</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="created" label="创建时间" />
            <el-table-column fixed="right" label="操作" min-width="100">
                <template #default="scope: {row: Container}">
                    <el-button link type="primary" @click="openStart(scope.row)"
                        v-if="scope.row.state !== 'running'">运行</el-button>
                    <el-button link type="primary" @click="openStop(scope.row)"
                        v-if="scope.row.state === 'running'">停止</el-button>
                    <el-button link type="primary" @click="openRemove(scope.row)">删除</el-button>
                    <el-button link type="primary" @click="openExecute(scope.row)">终端</el-button>
                </template>
            </el-table-column>
        </el-table>
        <ExecuteDrawer v-model="term"></ExecuteDrawer>
    </div>
</template>

<style lang="scss" scoped>
.content {
    height: 100%;
    .table {
        height: 80%;
        overflow-y: scroll;
    }
}
</style>